<template>
    <scroll-view scroll-y="true" class="scroll-wrap">
        <!-- 主题 -->
        <image class="theme" :src="vuex_templateData.theme" mode="widthFix"></image>
        <!-- 图片列表 -->
        <view class="list-wrap" v-if="modeList.length > 0" @click.capture="hideMenu">
            <view class="item-group" v-for="(item, index) in modeList" :key="index" :class="`item-group` + index" :style="{zIndex:index*10}">
                <view class="item" v-for="(item2, index2) in item" :key="index2" :class="`item` + index2" :id="'item' + index + '-' + index2">
                    <image class="mode" :class="`mode` + item2.imageIndex" :src="getModePath(`mode` + item2.imageIndex)" mode="widthFix"></image>
                    <ImageItem
                        v-if="item2.image_url_c"
                        mode="aspectFill"
                        class="photo"
                        :class="`photo` + item2.imageIndex"
                        :photoData="item2"
                        :imageStyle="item2.imageIndex == 0 ? photoStyles[index].imageStyle : photoStyles[1].imageStyle"
                        :photoEleInfo="photoEleInfo"
                        :showEditMenu="activeClassName === `photo` + item2.imageIndex"
                        @click.native="showEditIcon(`photo` + item2.imageIndex)"
                        @delect="delect"
                        @replace="choosePhoto"
                    ></ImageItem>
                </view>
            </view>
        </view>
        <!-- 底部小程序二维码 -->
        <BottomCode></BottomCode>
    </scroll-view>
</template>
<script>
import BottomCode from '../BottomCode.vue';
import LazyImage from '@/components/LazyImage/index.vue';
import ImageItem from '../ImageItem.vue';
import { template } from '@/mixins/template.js';
import { mapList } from '@/common/common.js';
export default {
    name: 'Template0',
    data() {
        return {
            modeList: [],
            modeNumArr: [1, 1, 3, 1, 1, 1, 1],
            // 默认的图片
            defaultPhotoPath: require('../../static/posterPage/default.png'),
            // 图片样式
            imageStyle: {
                borderRadius: '2rpx'
            }
        };
    },
    mixins: [template],
    methods: {
        //获取图片列表
        getList() {
            if (this.templateStatus === 'templete') {
                this.modeList = mapList(this.modeNumArr, this.emptyList);
            } else {
                if (this.vuex_selectedPhotosList.length > 0) {
                    this.modeList = mapList(this.modeNumArr, this.vuex_selectedPhotosList, this.defaultPhotoPath);
                } else {
                    this.modeList = [];
                }
            }
        }
    },
    components: { LazyImage, BottomCode, ImageItem }
};
</script>
<style lang="scss" scoped>
.scroll-wrap {
    height: 100vh;
    .theme {
        width: 100%;
    }
    .list-wrap {
        background: #fff;
        width: 660rpx;
        margin: 35rpx 70rpx 0 70rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        border: 4rpx dashed #778ccf;
        .item-group {
            position: relative;
            left: -70rpx;
            top: 0;
            width: 750rpx;
            .item {
                position: absolute;
                width: 750rpx;
                left: 0;
                top: 0;
                z-index: 1;
                .mode {
                    position: relative;
                    width: 750rpx;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, 0);
                }
                .mode {
                    position: relative;
                    width: 750rpx;
                    left: 50%;
                    top: 0;
                    transform: translate(-50%, 0);
                }
                .mode3,.mode4 {
                    position: relative;
                    width: 1rpx;
                    height: 1rpx;
                }
  
            }
            .item0 {
                position: relative;
                left: 0;
                top: 0;
            }
        }
        .photo {
            position: absolute;
            border-radius: 10rpx;
            z-index: 2;
        }
        .photo0 {
            left: 116rpx;
            top: 98rpx;
            width: 500rpx;
            height: 338rpx;
            border-radius: 100%;
        }
        .photo1 {
            left: 284rpx;
            top: 46rpx;
            width: 370rpx;
            height: 250rpx;
        }
        .photo2 {
            left: 114rpx;
            top: 44rpx;
            width: 172rpx;
            height: 252rpx;
        }
        .photo3 {
            left: 298rpx;
            top: 44rpx;
            width: 172rpx;
            height: 252rpx;
        }
        .photo4 {
            left: 480rpx;
            top: 44rpx;
            width: 172rpx;
            height: 252rpx;
        }
        .photo5 {
            left: 106rpx;
            top: 52rpx;
            width: 306rpx;
            height: 208rpx;
            z-index: 2;
        }
        .photo6 {
            left: 364rpx;
            top: 36rpx;
            width: 306rpx;
            height: 208rpx;
        }
        .photo7 {
            left: 96rpx;
            top: 56rpx;
            width: 370rpx;
            height: 250rpx;
        }
        .photo8 {
            left: 114rpx;
            top: 46rpx;
            width: 536rpx;
            height: 324rpx;
        }
    }
}
</style>
